<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<section class="content-header">
    <h1>添加制作件</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" onsubmit="return false;">

                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <input id="sheetId" name="sheetId" type="hidden" class="form-control"
                                           th:value="${sheetId}">
                                    <input id="proCode" name="proCode" type="hidden" class="form-control"
                                           th:value="${proCode}">
                                </div>
                                <!--<div class="form-group">-->
                                    <!--<label for="query-proName">项目名称</label>-->
                                    <!--<input id="query-proName" type="text" name="proName" class="form-control"-->
                                           <!--placeholder="请输入项目名称">-->
                                <!--</div>-->
                                <!--<div class="form-group">-->
                                    <!--<label for="query-part">部分</label>-->
                                    <!--<input id="query-part" type="text" name="part" class="form-control"-->
                                           <!--placeholder="请输入部分">-->
                                <!--</div>-->
                                <!--<div class="form-group">-->
                                    <!--<label for="query-sectionName">设计科室</label>-->
                                    <!--<input id="query-sectionName" type="text" name="sectionName" class="form-control"-->
                                           <!--placeholder="请输入科室">-->
                                <!--</div>-->
                                <!--<div class="form-group">-->
                                    <!--<label for="query-createNameTwo">设计者</label>-->
                                    <!--<input id="query-createNameTwo" type="text" name="createNameTwo"-->
                                           <!--class="form-control"-->
                                           <!--placeholder="请输入设计者">-->
                                <!--</div>-->
                                <!--<div class="form-group">-->
                                    <!--<label for="query-receiveStatus">接收状态</label>-->
                                    <!--<select id="query-receiveStatus" class="form-control" name="receiveStatus">-->
                                        <!--<option value="0" selected>未接收</option>-->
                                        <!--<option value="1">已接收</option>-->
                                        <!--<option value="">全部</option>-->
                                    <!--</select>-->
                                <!--</div>-->
                                <!--<button type="button" class="btn btn-success" id="btn-search"-->
                                        <!--onclick="js.table.search(table)">-->
                                    <!--<span class="Bold">搜索</span>-->
                                <!--</button>-->
                            </div>
                        </div>
                    </form>
                    <button type="button" class="btn btn-success" id="btn-receive"
                            onclick="selected()" shiro:hasPermission="tec:batchRecep:edit">
                        <span class="Bold">确定</span>
                    </button>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    let table, data = [];

    /** 选择计划 */
    function selected() {
        let arr1;
        let arr = js.table.selectRows(table);
        if (arr.length < 1) {
            js.modal.alert("请最少选择一条要发货的单据");
            return;
        }
        if (data.size > 0) {
            let str = js.table.selectColumns(table, 'id');
            arr1 = data.filter(function (element) {
                return arr.indexOf(element) === -1;
            });
        } else {
            arr1 = arr;
        }

        let sheetId = $("#sheetId").val();
        js.modal.confirm("确定要发货吗?", function () {
            js.post({
                // url:  ctx + 'craft/receive/receiveCard?ids='+arr,
                url: ctx + 'create/shipments/shipProduct',
                data: {arr: JSON.stringify(arr1), sheetId: sheetId},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        window.history.go(-1);
                    } else {
                        js.modal.warning(result.msg);

                    }
                    js.modal.closeLoading();
                    location.reload();
                }
            })
        });
    }

    $(function () {

        /** 加载列表 */
        table = js.table.init({
            url: ctx + "create/shipments/productDetailList",
            showExport: false,
            columns: [
                {
                    checkbox: true,
                    formatter: function (value, row) {
                        if (row.drawNum == 0) {
                            return {disabled: true}
                        } else {
                            return {disabled: false}
                        }
                    }
                },
                {

                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: "类型", field: 'special'},
                {title: "部分", field: 'part'},
                {title: "零件名称", field: 'drawName'},
                {title: "图号", field: 'drawNo'},
                {title: "数量", field: 'drawNum'},
                {
                    title: "发货数量", field: 'num',
                    formatter: function (value, row, index) {
                        if (value) {
                            return '<input type="number" min="0" step="1" max="' + row.drawNum + '"  step="1" id="'+index+'" style="border: none;width: 50px" data-index="' + index + '" onchange="changeReason(this)" value="' + value + '" oninput="myFunction('+row.drawNum+','+index+')" />'
                        } else {
                            return '<input type="number" min="0" step="1" id="reason" max="' + row.drawNum + '" style="border: none;width: 50px;color: red" data-index="' + index + '" onchange="changeReason(this)" value=0 />'

                        }
                    }
                },
                {title: "图纸类型", field: 'drawType',
                    formatter: function(value, row, index){
                        if(value==1){
                            return '<span >制作件</span>';
                        }else{
                            return '<span >装配件</span>';
                        }
                    }
                },
                {title: "存放地点", field: 'location'}
            ]
        });
    });
    function myFunction(num,index) {
        var x = document.getElementById(index).value;
        if(x==""){
            x=-1;
        }
        if(x>num){
            document.getElementById(index).value=num;
        }
        if(x<=0){
            document.getElementById(index).value=0;
        }
        if(x%1>0){

            document.getElementById(index).value=parseInt(x);
        }
    }
    /** 改变table表格内容是触发*/
    function changeReason(e) {
       ;
        var value = $(e).val();
        if(value==""){
            value=0;
        }
        var index = $(e).attr("data-index");
        data = $("#bootstrap-table").bootstrapTable('getData');
        if(value >data[index].drawNum){
            data[index].num =data[index].drawNum;
        }else if(value<0){
            data[index].num=0;
        }
        else {
            data[index].num =parseInt(value) ;
        }
        // $('#bootstrap-table').bootstrapTable('load', data);

    }
</script>
</body>
</html>
